<template>
  <!-- 资产配置 -->
  <el-row>
    <el-col :span="24" style="margin-top: 20px">
      <el-card round style="margin-top: 20px">
        <el-row type="flex" style="align-items: center">
          <el-col span="18">
            <el-table
            :data='asset'
              cell-style="text-align:center;font-size:20px"
              header-cell-style="text-align:center;font-size:20px"
            >
              <el-table-column
                prop="asset_amount"
                label="总金额(元)"
                width="300px"
              >

              </el-table-column>
              <el-table-column
                prop="yesterday_profit"
                label="昨日收益"
              ></el-table-column>
              <el-table-column
                prop="holding_profit"
                label="持有收益"
              >
             </el-table-column>
              <el-table-column
                prop="cumulative_profit"
                label="累计收益"
              >
              </el-table-column>
            </el-table>
          </el-col>
          <el-col span="3">
            <el-button
              @click="sellnow"
              style="
                border-radius: 10px;
                color: #ffffff;
                background-color: #39c5bb70;
                border-width: 3px;
                border-color: #39c5bb;
                margin: 30px 0px;
                padding: 0px;
                width: 80%;
                height: 80px;
              "
            >
              <div
                style="
                  display: flex;
                  align-items: center;
                  justify-content: center;
                "
              >
                <span style="font-size: 30px; font-weight: bold">转出</span>
                <i
                  class="el-icon-right"
                  style="font-size: 50px; padding-left: 10px; font-weight: bold"
                ></i>
              </div>
            </el-button>
          </el-col>
          <el-col span="3">
            <el-button
              @click="perchasenow"
              style="
                border-radius: 10px;
                color: #ffffff;
                background-color: #39c5bb70;
                border-width: 3px;
                border-color: #39c5bb;
                margin: 30px 0px;
                padding: 0px;
                width: 80%;
                height: 80px;
              "
            >
              <div
                style="
                  display: flex;
                  align-items: center;
                  justify-content: center;
                "
              >
                <span style="font-size: 30px; font-weight: bold">转入</span>
                <i
                  class="el-icon-coin"
                  style="font-size: 50px; padding-left: 10px; font-weight: bold"
                ></i>
              </div>
            </el-button>
          </el-col>
        </el-row>
      </el-card>

      <el-card style="margin-top: 20px">
        <div slot="header" class="clearfix" style="text-align: left">
          <span>持仓详情</span>
        </div>
        <el-table
          :data="tabledata"
          cell-style="text-align:center;font-size:20px"
          header-cell-style="text-align:center;font-size:20px"
          height="500px"
        >
                  <el-table-column type="expand" label="详情">
            <template slot-scope="props">
              <el-form label-position="left" inline class="demo-table-expand">
                <el-form-item label="基金名称:">
                  <span>{{ props.row.fund_name }}</span>
                </el-form-item>
                <el-form-item label="金额:">
                  <span>{{ props.row.fund_amount }}</span>
                </el-form-item>
                 <el-form-item label="持有收益率:">
                  <span>{{ props.row.holding_profit_rate }}%</span>
                </el-form-item>
              </el-form>
            </template>
          </el-table-column>
          <el-table-column
            v-for="(val, key,index) in tablelable"
            :key="key"
            :prop="key"
            :label="val"
            :formatter="formatterprofitrate"
            :sortable="index==0?false:true"
          ></el-table-column>
        </el-table>
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
import { getAllMyHoldingAPI } from "@/api/getAllMyHoldingAPI";
import { getAllAssetsAPI } from "@/api/getAllAssetsAPI";
export default {
  data() {
    return {
      // 资产配置对象
      asset: [
         {
          asset_amount: 16888.88,
          yesterday_profit: (-400.0).toFixed(2),
          holding_profit: 1234.11,
          cumulative_profit: 7865.96,
        },
      ],
       
      // 表格数据，myholding对象
      tabledata: [
        {
          fund_name: "基金1",
          fund_amount: (2333.5).toFixed(2),
          yesterday_profit: 50.05,
          holding_profit: (521).toFixed(2),
          holding_profit_rate: ((521 / 2333.5) * 100).toFixed(2),
        },
      ],
      // 表头
      tablelable: {
        fund_name: "基金名称",
        fund_amount: "金额(元)",
        holding_profit_rate: "持有收益率(%)",
      },
    };
  },
  methods: {
    //转出
    sellnow() {
      const confirm = this.$confirm(
        "点击确定将进入转出页面，是否继续？",
        "转出"
      )
        .then(() => {
          console.log(this.asset.asset_amount)
        if(this.asset[0].asset_amount>0){
          // 跳转至转出页面
           this.$router.push({
            path: "sell",
            query: {
              user_id: this.$route.query.user_id,
            },
          });
        }else{
           this.$message.error('您尚未确定或买入基金方案，无法转出！')
        }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消操作",
          });
        });
    },
    //转入
    perchasenow() {
      const confirm = this.$confirm(
        "点击确定将进入转入页面，是否继续？",
        "转入"
      )
        .then(() => {
          // 发get请求检测能否转入




          this.$message({
            type: "success",
            message: "转入成功!",
          });
          // 跳转到转入页面
          this.$router.push({
            path: "buy",
            query: {
              user_id: this.$route.query.user_id,
            },
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消操作",
          });
        });
    },
    // 持有收益率格式
    formatterprofitrate(row, column) {
      if (column.property == "holding_profit_rate") {
        return row.holding_profit_rate + "%";
      } else return row[column.property];
    },
    // 获取我的持有对象
    async getMyholdings() {
      const { data: res } = await getAllMyHoldingAPI(this.$route.query.user_id);
      if (res.flag) {
        this.$message.success("获取我的持有列表成功！");
        this.tabledata = res.data;
      }
    },
    //获取用户资产配置
    async getAllAssets() {
      console.log("发送getAllAssets请求");
      const { data: res } = await getAllAssetsAPI(this.$route.query.user_id);
      if (res.flag) {
        console.log(res.flag);
        var list = this.$jsonToObj(res);
        this.asset = list;
      }
    },
  },
  created() {
    this.getAllAssets();
    this.getMyholdings();
  },
};
</script>

<style scoped></style>
